<template>
    <Row>
        <Col span="24">
            <Card shadow>
                <p slot="title">
                    <Icon type="md-pin" />
                    POI点数据
                </p>
                <Form
                    ref="poiForm"
                    :model="formData"
                    :rules="formRules"
                    :label-width="90"
                    label-position="left"
                    class="form-wrapper"
                >
                    <FormItem label="ID" prop="id">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.id"
                                    :disabled="useXlsKey.id || isInEdit"
                                    placeholder="请输入POI点的ID"
                                />
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.id"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.id">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.id"
                                    @on-change="readFromXls('id')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="POI点名称" prop="title">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.title"
                                    :disabled="useXlsKey.title"
                                    placeholder="请输入POI点的名称"
                                ></Input>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.title"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.title">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.title"
                                    @on-change="readFromXls('title')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="图标名称" prop="iconName">
                        <Row>
                            <Col span="24">
                                <Select
                                    v-model="formData.iconName"
                                    :disabled="useXlsKey.iconName"
                                >
                                    <Option
                                        v-for="item in iconList"
                                        :value="item.url"
                                        :key="item.id"
                                        >{{ item.url }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                        <Row v-if="formData.iconName">
                            <Col span="24">
                                <img
                                    :src="getIconPreview()"
                                    style="margin-top: 12px"
                                    class="preview"
                                />
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.iconName"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.iconName">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.iconName"
                                    @on-change="readFromXls('iconName')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="状态" prop="state">
                        <Row>
                            <Col span="24">
                                <Select
                                    v-model="formData.state"
                                    placeholder="请选择POI的状态"
                                    :disabled="useXlsKey.state"
                                >
                                    <Option
                                        v-for="item in stateList"
                                        :value="item.value"
                                        :key="item.id"
                                        >{{ item.name }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.state"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.state">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.state"
                                    @on-change="readFromXls('state')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="离地高度" prop="elevation">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.elevation"
                                    :disabled="useXlsKey.elevation"
                                    placeholder="请输入POI点的离地高度"
                                ></Input>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.elevation"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.elevation">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.elevation"
                                    @on-change="readFromXls('elevation')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        v-if="formData.viewMode === 'window'"
                        label="弹窗URL"
                        prop="windowUrl"
                    >
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.windowUrl"
                                    :disabled="useXlsKey.windowUrl"
                                    placeholder="请输入弹窗的链接地址"
                                ></Input>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.windowUrl"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.windowUrl">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.windowUrl"
                                    @on-change="readFromXls('windowUrl')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        v-if="formData.viewMode === 'window'"
                        label="弹窗尺寸"
                        prop="windowSize"
                    >
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.windowSize"
                                    :disabled="useXlsKey.windowSize"
                                    placeholder="请输入弹窗尺寸，格式为“宽,高”"
                                ></Input>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.windowSize"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.windowSize">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.windowSize"
                                    @on-change="readFromXls('windowSize')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="绑定名称" prop="bindOn">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.bindOn"
                                    :disabled="useXlsKey.bindOn"
                                    placeholder="请输入POI的绑定名称"
                                ></Input>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.bindOn"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.bindOn">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.bindOn"
                                    @on-change="readFromXls('bindOn')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="点击行为" prop="viewMode">
                        <Row>
                            <Col span="24">
                                <Select
                                    v-model="formData.viewMode"
                                    :disabled="useXlsKey.viewMode"
                                >
                                    <Option
                                        v-for="item in viewModeEnum"
                                        :value="item.value"
                                        :key="item.id"
                                        >{{ item.name }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.viewMode"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.viewMode">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.viewMode"
                                    @on-change="readFromXls('viewMode')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        v-if="formData.viewMode === 'view'"
                        label="子路由名称"
                        prop="viewName"
                    >
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.viewName"
                                    :disabled="useXlsKey.viewName"
                                    placeholder="请输入点击POI后跳转的路由名称"
                                ></Input>
                            </Col>
                        </Row>
                        <Row v-if="useExcel">
                            <Col span="24">
                                <Checkbox v-model="useXlsKey.viewName"
                                    >使用数据源的列名自动映射</Checkbox
                                >
                            </Col>
                        </Row>
                        <Row v-if="useXlsKey.viewName">
                            <Col span="24">
                                <Select
                                    v-model="xlsKey.viewName"
                                    @on-change="readFromXls('viewName')"
                                >
                                    <Option
                                        v-for="item in xlsKeyList"
                                        :value="item.key"
                                        :key="item.id"
                                        >{{ item.key }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="savePOIData"
                            >保存数据</Button
                        >
                        <Button
                            type="error"
                            v-if="isInEdit"
                            @click="deletePOIData"
                            >删除</Button
                        >
                    </FormItem>
                </Form>
            </Card>
        </Col>
    </Row>
</template>

<script>
    import config from "@/config/global";
    import { busEventEmit, busEventHandle } from "@/teleport/bus";
    import { clone } from "@/libs/tools";

    export default {
        name: "",
        props: {
            excelData: {
                type: Object,
                default: () => new Object(),
            },
        },
        data() {
            return {
                formData: {
                    id: null,
                    title: null,
                    iconName: null,
                    elevation: null,
                    windowUrl: null,
                    windowSize: null,
                    bindOn: null,
                    viewMode: "window",
                    viewName: null,
                    coord: null,
                    state: null,
                },
                xlsKey: {
                    id: null,
                    title: null,
                    iconName: null,
                    state: null,
                    elevation: null,
                    windowUrl: null,
                    windowSize: null,
                    bindOn: null,
                    viewMode: null,
                    viewName: null,
                },
                useXlsKey: {
                    id: false,
                    title: false,
                    iconName: false,
                    state: false,
                    elevation: false,
                    windowUrl: false,
                    windowSize: false,
                    bindOn: false,
                    viewMode: false,
                    viewName: false,
                },
                xlsKeyList: [],
                stateList: [
                    {
                        id: "state-normal",
                        value: "normal",
                        name: "正常状态",
                    },
                    {
                        id: "state-abnormal",
                        value: "abnormal",
                        name: "异常状态",
                    },
                ],
                iconList: config.iconList.map((o) => {
                    return { id: o, url: o };
                }),
                iconPreviewUrl: "",
                viewModeEnum: [
                    {
                        id: "viewmode-window",
                        value: "window",
                        name: "弹出POI Window",
                    },
                    {
                        id: "viewmode-view",
                        value: "view",
                        name: "跳入子路由",
                    },
                    {
                        id: "viewmode-match",
                        value: "match",
                        name: "点位匹配逻辑",
                    },
                ],
                formRules: {
                    id: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    title: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    iconName: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    elevation: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    windowUrl: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    windowSize: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    bindOn: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    viewMode: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    viewName: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    state: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                },
                isInEdit: false,
                useExcel: false,
            };
        },
        watch: {
            excelData: {
                handler(n, o) {
                    if (n !== o) {
                        if (store.useExcel) {
                            this.useExcel = true;
                            this.fillExcelDataKeyEnum(n);
                            this.updateFromExcel();
                        }
                        if (n) {
                            this.updatePOICoord(n.coord);
                        }
                    }
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            savePOIData() {
                this.$refs["poiForm"].validate((valid) => {
                    if (valid) {
                        this.$Message.success("POI点数据已保存");
                        let resultData = {};
                        if (store.useExcel) {
                            let excelDataCopy = JSON.parse(
                                JSON.stringify(this.excelData)
                            );
                            for (let o in this.formData) {
                                delete excelDataCopy[this.xlsKey[o]];
                            }
                            resultData = Object.assign(
                                this.formData,
                                excelDataCopy
                            );
                        } else {
                            resultData = this.formData;
                        }
                        if (this.isInEdit) {
                            busEventEmit("poi-data-mutanted", clone(resultData));
                            busEventEmit(
                                "mutant-poi-result",
                                JSON.stringify(resultData)
                            );
                            this.isInEdit = false;
                        } else {
                            busEventEmit("poi-data-complete", clone(resultData));
                            busEventEmit(
                                "push-poi-result",
                                JSON.stringify(resultData)
                            );
                        }
                    } else {
                        this.$Message.error("请检查表单是否正确填写");
                    }
                });
            },
            deletePOIData() {
                // TODO:
                busEventEmit("delete-poi-result", this.formData.id);
                busEventEmit("delete-poi", this.formData.id);
                this.isInEdit = false;
            },
            fillExcelDataKeyEnum(v) {
                let keys = Object.keys(v);
                this.xlsKeyList = keys.map((o, i) => {
                    return { id: `${o}-${i}`, key: o };
                });
            },
            readFromXls(formKey) {
                let useXls = this.useXlsKey[formKey];
                let xlsKey = this.xlsKey[formKey];
                if (useXls) {
                    this.formData[formKey] = this.excelData[xlsKey];
                }
            },
            updateFromExcel() {
                let formKeys = Object.keys(this.formData);
                formKeys.forEach((o, i) => {
                    if (this.useXlsKey[o]) {
                        this.readFromXls(o);
                    }
                });
            },
            listenUpdateFormEvent() {
                const $this = this;
                busEventHandle("update-form-data", (msg) => {
                    $this.updateFromEvent(msg);
                });
            },
            updateFromEvent(v) {
                this.formData = v;
                this.isInEdit = true;
                for (let index in this.useXlsKey) {
                    this.useXlsKey[index] = false;
                }
            },
            updatePOICoord(coord) {
                this.formData.coord = coord;
            },
            getIconPreview() {
                return `${config.imageUrl}${this.formData.iconName}.png`;
            },
        },
        created() {
            this.listenUpdateFormEvent();
        },
    };
</script>

<style lang="" scoped>
</style>